<template>
  <header class="search-bar">
    <figure class="logo">
		<img :src="require('@/assets/index/' + $store.state.homeLogo + '@2x.png')"/>
    </figure>
    <form class="search-form">
		<input @focus="searchList" type="search" class="f24" placeholder="请输入大师姓名，问题">
	</form>
    <router-link class="tidings" tag="figure" to="message">
		<img src="@/assets/index/xinxi@2x.png">
		<span class="f16" v-if="amount > 0">{{amount > 10 ? '9+' : amount}}</span>
    </router-link>
  </header>
</template>

<script>
export default {
	props: {imgUrl:String},
	data() {
		return {
			amount: '0',
		}
	},
	methods: {
		getMessageSummary() { // 获取消息通知
            let params = {
                userId: this.$store.state.userId
            }
            this.$http.fetchGet('getMessageSummary', params).then(res => {
                if(res.code == 200) {
                    this.amount = res.data.total
                } else {
                    console.log(res.msg)
                }
            }, err => {
                console.log(err)
            })
		},
		searchList() {
			this.$router.push({
				path: '/searchList'
			})
		}
	},
	mounted() {
		console.log(this.$store.state.userId)
		if(this.$store.state.userId){
			console.log(1)
			this.getMessageSummary()
		}	
	}
}
</script>

<style scoped lang="less">
.search-bar{
	background-color: @primary;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 11;
	width: 100%;
	display: flex;
	justify-content: space-between;
	.search-form{
		flex: 1;
		.h(64);
		.bri(10);
		.pl(50);
		.mt(20);
		.mb(20);
		background-color: @bgColor;
		background-image: url('../assets/index/search@2x.png');
		.px2rem(background-position-x, 20);
		background-position-y: center;
		background-repeat: no-repeat;
		.px2rem(background-size, 20);
		input{
			border: none;
			outline: none;
			background: none;
			width: 100%;
			height: 100%;
		}
	}
	.logo, .tidings{
		position: relative;
		.w(100);
		display: flex;
		align-items: center;
		justify-content: center;
		img{
			.h(38);
		}
		span{
            position: absolute;
            top: 10px;
            right: 10px;
            background: red;
            border-radius: 50%;
            display: inline-block;
            .w(30);
            .h(30);
            .lh(30);
			text-align: center;
			color: #fff;
        }
	}
}
</style>
